import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const IconListMeta: IPublicTypeComponentMetadata = {
  componentName: 'IconList',
  title: '图标列表',
  category: '基础组件',
  group: '首页',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'IconList',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
    {
      name: 'ref',
      propType: 'object',
    },
    {
      name: 'key',
      propType: 'string',
    },
    {
      name: 'style',
      propType: 'object',
    },
    {
      name: 'className',
      propType: 'string',
    },
    {
      name: 'icons',
      propType: 'arrayOf',
    },
    {
      name: 'width',
      propType: 'number',
    },
    {
      name: 'height',
      propType: 'number',
    },
    {
      name: 'backgroundColor',
      propType: 'string',
    },
    {
      name: 'borderRadius',
      propType: 'number',
    },
    {
      name: 'iconSize',
      propType: 'number',
    },
    {
      name: 'iconGap',
      propType: 'number',
    },
    {
      name: 'padding',
      propType: 'number',
    },
    {
      name: 'onClick',
      propType: 'func',
    }
  ],
  configure: {
    props: [
      // 基础配置
      {
        name: 'basic',
        type: 'group',
        display: 'accordion',
        title: {
          label: '基础配置',
        },
        items: [
          {
            name: 'icons',
            title: {
              label: '图标列表',
              tip: '图标列表数据，包含id、src、alt等属性'
            },
            setter: 'JsonSetter',
          },
          {
            name: 'width',
            title: {
              label: '容器宽度',
              tip: '容器的宽度，单位px'
            },
            setter: 'NumberSetter',
          },
          {
            name: 'height',
            title: {
              label: '容器高度',
              tip: '容器的高度，单位px'
            },
            setter: 'NumberSetter',
          }
        ]
      },
      // 图标配置
      {
        name: 'icon',
        type: 'group',
        display: 'accordion',
        title: {
          label: '图标配置',
        },
        items: [
          {
            name: 'iconSize',
            title: {
              label: '图标大小',
              tip: '图标的宽高尺寸，单位px'
            },
            setter: 'NumberSetter',
          },
          {
            name: 'iconGap',
            title: {
              label: '图标间距',
              tip: '图标之间的间距，单位px'
            },
            setter: 'NumberSetter',
          }
        ]
      },
      // 外观配置
      {
        name: 'appearance',
        type: 'group',
        display: 'accordion',
        title: {
          label: '外观配置',
        },
        items: [
          {
            name: 'backgroundColor',
            title: {
              label: '背景颜色',
              tip: '容器的背景颜色'
            },
            setter: 'ColorSetter',
          },
          {
            name: 'borderRadius',
            title: {
              label: '圆角大小',
              tip: '容器的圆角大小，单位px'
            },
            setter: 'NumberSetter',
          },
          {
            name: 'padding',
            title: {
              label: '内边距',
              tip: '容器的内边距，单位px'
            },
            setter: 'NumberSetter',
          }
        ]
      },
      // 样式属性
      {
        name: 'style',
        type: 'group',
        display: 'accordion',
        title: {
          label: '样式属性',
        },
        items: [
          {
            name: 'style',
            title: {
              label: '自定义样式',
            },
            setter: 'StyleSetter',
          },
          {
            name: 'className',
            title: {
              label: '自定义类名',
            },
            setter: 'StringSetter',
          }
        ]
      }
    ],
    supports: {
      style: true,
      className: true,
      events: ['onClick']
    },
    component: {}
  }
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '导航图标列表',
    screenshot: '',
    schema: {
      componentName: 'IconList',
      props: {
        width: 64,
        height: 1048,
        backgroundColor: 'rgba(0,0,0,0.5)',
        borderRadius: 8,
        iconSize: 30,
        iconGap: 12,
        padding: 12,
        icons: [
          {
            id: 'home',
            src: 'http://localhost:8085/static/images/shouye/编组 34备份 3.png',
            alt: '首页'
          },
          {
            id: 'menu',
            src: 'http://localhost:8085/static/images/shouye/编组 35备份.png',
            alt: '菜单'
          },
          {
            id: 'stats',
            src: 'http://localhost:8085/static/images/shouye/编组 24备份.png',
            alt: '统计'
          }
        ]
      }
    }
  }
];

export default {
  ...IconListMeta,
  snippets,
};
